<template>
  <div class="auth-container">
    <van-nav-bar title="实名认证" left-arrow @click-left="onClickLeft" />
    <div class="upload-section">
      <div class="upload-box">
        <van-icon name="plus" class="upload-icon" />
        <p>正面</p>
        <p>上传护照/证件正面</p>
      </div>
      <div class="upload-box">
        <van-icon name="plus" class="upload-icon" />
        <p>反面</p>
        <p>上传护照/证件反面</p>
      </div>
    </div>
    <van-cell-group>
      <van-field v-model="name" label="姓名" placeholder="请输入您的姓名" />
      <van-field
        v-model="idNumber"
        label="证件/证件号"
        placeholder="请输入证件/证件号"
      />
    </van-cell-group>
    <van-button type="primary" class="confirm-button" @click="onConfirm"
      >确认</van-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      idNumber: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm() {
      // 确认按钮的处理逻辑
    },
  },
};
</script>

<style scoped>
.auth-container {
  padding: 16px;
  background-color: #0d0d0d;
  color: #fff;
  height: 100vh;
}

.upload-section {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
}

.upload-box {
  width: 48%;
  height: 150px;
  border: 1px dashed #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #1a1a1a;
}

.upload-icon {
  font-size: 32px;
  color: #ccc;
}

.confirm-button {
  margin-top: 16px;
  background: linear-gradient(to right, #00c6ff, #0072ff);
  color: #fff;
}
</style>
